<template>
  <!-- 代理降级 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="渠道:" label-width="50px">
            <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
              <el-option label="全部" value=""></el-option>
              <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户ID:" label-width="80px">
            <el-input class="width200" type="text" v-model="listQuery.user_id" clearable placeholder="请输入用户ID"/>
          </el-form-item>
          <el-form-item label="代理等级:" label-width="80px">
            <el-select v-model="listQuery.agent_level" placeholder="请选择代理等级" filterable >
              <el-option label="全部" :value="-1"></el-option>
              <el-option :label="'【'+item+'】级'" :value="item" v-for="(item, index) in 5" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期时间:" label-width="80px">
            <el-date-picker is-range v-model="listQuery.dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" 
            end-placeholder="结束日期" class="full-width-input time-box" :default-time="['00:00:00', '23:59:59']" clearable></el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="user_id" label="用户ID" width="120" />
          <el-table-column align="center" prop="nick_name" label="用户昵称" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="item_details" @click="handleCurrentChange(scope.row),isShowUserDetails = true"> {{ scope.row.nick_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="agent_level" label="代理等级(经验)" width="180">
            <template slot-scope="scope">
              <span>{{scope.row.agent_level}}({{ scope.row.agent_exp }})</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="invite_num" label="邀请人数" width="120"/>
          <el-table-column align="center" prop="invite_commission" label="邀请佣金" width="120"/>
          <el-table-column align="center" prop="all_invite_num" label="A级代理总人数" width="120"/>
          <el-table-column align="center" prop="pay_money" label="玩家充值金额" width="120"/>
          <el-table-column align="center" prop="total_commission" label="产生佣金总数" width="120"/>
          <el-table-column align="center" prop="jar_commission" label="罐子佣金" width="150"/>
          <el-table-column align="center" prop="a_recharge_commission" label="A级产生充值佣金" width="150"/>
          <el-table-column align="center" prop="b_recharge_commission" label="B级产生充值佣金" width="150"/>
          <el-table-column align="center" prop="c_recharge_commission" label="C级产生充值佣金" width="150"/>
          <el-table-column align="center" prop="d_recharge_commission" label="D级产生充值佣金" width="150"/>
          <el-table-column align="center" prop="a_invite_num" label="A级邀请人数" width="120"/>
          <el-table-column align="center" prop="b_invite_num" label="B级邀请人数" width="120"/>
          <el-table-column align="center" prop="c_invite_num" label="C级邀请人数" width="120"/>
          <el-table-column align="center" prop="d_invite_num" label="D级邀请人数" width="120"/>
          <el-table-column prop="admin_id" label="操作人" align="center" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.admin_id">【{{scope.row.admin_id}}】</span>
              {{scope.row.admin_name}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="reason" label="降级理由" width="200" show-overflow-tooltip/> 
          <el-table-column prop="operation" label="操作" align="left" fixed="right" width="150" >
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="" content="代理降级" placement="top-start">
                <el-button size="mini" type="danger" :disabled="scope.row.agent_level==1?true:false" @click="handleCurrentChange(scope.row),isShowDetails = true" icon="el-icon-setting"/>
              </el-tooltip>
              <el-tooltip effect="dark" v-permission="" content="代理扣除经验" placement="top-start">
                <el-button size="mini" type="warning" :disabled="scope.row.agent_exp?false:true" @click="handleCurrentChange(scope.row),isShowExpDetails = true,isShowDetails = true" icon="el-icon-remove-outline"/>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
      <el-dialog title="代理降级" :visible.sync="isShowDetails" width="50%" :before-close="onHideDetails" :close-on-click-modal="false">
        <span class="box-title flex marginB20" v-show="!isShowExpDetails">
          降级代理等级: <span class="mustPass">*</span>
          <el-input-number class="marginL10" :min="0" :max="checkedItem.agent_level-1" :precision="0" v-model="formParams.level" controls-position="right" clearable placeholder="请输入降级代理等级"/>
        </span>
        <span class="box-title flex marginB20" v-show="isShowExpDetails">
          代理扣除经验:<span class="mustPass">*</span>
          <el-input-number class="marginL10" :min="0" :max="checkedItem.agent_exp" :precision="0" v-model="formParams.experience" controls-position="right" clearable placeholder="请输入降级代理经验"/>
        </span>
        <span class="box-title flexStart marginB20">
          降级理由:<span class="mustPass">*</span>
          <el-input class="width90 marginL10" type="textarea" :rows="4" v-model="formParams.downReason" placeholder="请输入降级理由"/>
        </span>
        <span v-show="!isShowExpDetails" class="colorRed" style="font-size:17px;">降级后，降级前经验的百分比会同步到扣除后等级的升级百分比，变相扣除了大量经验 请谨慎操作!!!</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="onHideDetails">取 消</el-button>
          <el-button type="primary" @click="agentDown">确 定</el-button>
        </span>
      </el-dialog>
      <user-details title="玩家详情" :show="isShowUserDetails" :data="checkedItem" @onHideDetails="onHideDetails"/>
    </div>
  </div>
</template>

<script>
import { throttle } from "@/utils/index";
import { 
  getReduce,
  setReduce,
 } from "@/api/agent";
import UserDetails from '@/views/userManage/user/page-details.vue'
import SearchTable from "@/components/SearchTable";
export default {
  name: "downgrade",
  components: {
    UserDetails,
    SearchTable,
  },
  data () {
    return {
      channelData:this.$store.state.commonState.channelDataArray,
      checkedItem: {
        agent_level:0,
        agent_exp:0,
      },
      listLoading: false,
      isShowExpDetails: false,
      isShowDetails: false,
      isShowUserDetails: false,
      currentTotal: 0,
      formParams:{
        level:0,
        experience:0,
        downReason:'',
      },
      listQuery: {
        page: 1,
        size: 50,
        user_id:'',
        agent_id:'',
        agent_level:-1,
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      },
      dataList: [],
    };
  },
  created () {
    // this.getDataList()
  },
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getDataList()
  },
  methods: {
    // 代理降级
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = [];
      that.checkedItem = {
        agent_level:0,
        agent_exp:0,
      };
      that.listLoading = true;
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response = await getReduce(params)
      if(response.code==1){
        if (response.data.list) {
          response.data.list.forEach((item) => {
            item.isChecked = false;
            item.pay_money=that.$public.mathNumberDivideWan(item.pay_money)
            item.invite_commission=that.$public.mathNumberDivideWan(item.invite_commission)
            item.jar_commission=that.$public.mathNumberDivideWan(item.jar_commission)
            item.total_commission=that.$public.mathNumberDivideWan(item.total_commission)
            item.a_recharge_commission=that.$public.mathNumberDivideWan(item.a_recharge_commission)
            item.b_recharge_commission=that.$public.mathNumberDivideWan(item.b_recharge_commission)
            item.c_recharge_commission=that.$public.mathNumberDivideWan(item.c_recharge_commission)
            item.d_recharge_commission=that.$public.mathNumberDivideWan(item.d_recharge_commission)
          });
          that.currentTotal = response.data.total;
          that.dataList = response.data.list;
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false;
    },
    // 操作降级
    agentDown(){
      let that=this,row=that.checkedItem,params = that.formParams;
      that.$confirm(`是否让玩家【${row.nick_name}】降级?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setReduce({
          user_id: row.user_id,
          level: params.level,
          exp: params.experience,
          reason: params.downReason,
        }).then(res => {
          if (res.code == 1) {
            that.getDataList()
            that.onHideDetails()
            that.$message({
              type: 'success',
              message: res.msg
            })
          }
        })
      }).catch((err) => {})
    },
     // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val
      this.dataList.map(item => {
        if (item.user_id === val.user_id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    onHideDetails(){
      this.isShowDetails=false
      this.isShowExpDetails=false
      this.isShowUserDetails=false
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        user_id:'',
        agent_id:'',
        agent_level:-1,
        dateTime: [this.$public.getDateWeek('s',0)+' 00:00:00',this.$public.getDateWeek('e',0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      };
      this.getDataList();
    }, 2000),
  },
};
</script>

<style lang="scss" scoped></style>
